<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="./jquery.min.3.4.1.js"></script>
    <script>
        $(function () {
            /*选择段落后第一个div*/
            $('button:eq(0)').click(function () {
                // $('p+div').css('background', 'red');

                // $('p').next('div')  表示选中 p标签之后 的 一个 div标签
                // $('p') 表示选中页面中所有 p标签
                //  next(参数)， 参数表示需要选中的下一个元素的选择器
                // next 表示只能选中 紧挨着这个元素的 下一个兄弟元素
                $('p').next('div').css('background', 'red');

            });

            /*选择p后面的所有div兄弟元素*/
            $('button:eq(1)').click(function () {
                //.nextAll(选择器); 表示 选中当前选择器后面所有的兄弟项
                $('p').nextAll('div').css('background', 'red');
            });

            /*选择ulItem当中所有的li(所有的后代元素)*/
            $('button:eq(2)').click(function () {
                $('.ulItem>li').css('background', 'red');
            });

            /*选择ulItem当中所有的li(所有的后代元素)*/
            $('button:eq(3)').click(function () {
                $('.ulItem li').css('background', 'red');
            })



        });













    </script>
</head>

<body>

    <button>$('p+div')选择段落后第一个div</button><br>
    <button>$('p~div')选择p后面的所有div兄弟元素</button><br>
    <button>$('.ulItem>li')选择Ul当中子元素li(所有的子元素)</button><br>
    <button>$('.ulItem li')选择Ul当中所有的li(所有的后代元素)</button><br><br>

    <div>我是一个div</div>
    <p>段落标签</p>
    <p>段落标签</p>
    <p>段落标签</p>
    <div class="left">我是一个div</div>
    <div class="left">我是一个div</div>

    <p>段落标签</p>
    <div class="left">我是一个div</div>
    <div class="left">我是一个div</div>

    <h1>标题1标签</h1>
    <h2>标题2标签</h2>
    <h3>标题3标签</h3>
    <div class="left">我是一个div</div>
    <div class="left">我是一个div</div>
    <ul class="ulItem">
        <li>列表项</li>
        <li>列表项</li>
        <li>列表项d</li>
        <ul>
            <li>列表项</li>
            <li>列表项</li>
            <li>列表项</li>
        </ul>
    </ul>

</body>

</html>